<template>
  <view v-if="token">
    <!--导航栏-->
    <cu-custom bgColor="bg-blue" :isBack="true">
      <block slot="content">
      <view style="text-align: center;color: deeppink;">
      {{videoItem.title}}
      </view>
      </block>
      <block slot="right">
        <text class="margin-right text-df"></text>
      </block>
    </cu-custom>
    <!--视频区域-->
    <view v-if="showVideo" class="vid-pr flex-cnt bg-pt" :style="[{'background-image':'url('+pictureSrc+')'}]">
    </view>
    <video class="video-pr" id="myVideo" :src="videoSource" @error="videoErrorCallback" controls autoplay 
      objectFit="fill" :poster="pictureSrc" play-btn-position="center" 	enable-auto-rotation="true"></video>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_user', ['token'])
    },
    data() {
      return {
        videoItem: null,
        showVideo: false,
        videoSource: '',
        pictureSrc: '',
      }
    },
    onLoad(option) {
      //接收传递的参数
      this.videoItem = JSON.parse(decodeURIComponent(option.item));
    },
    onReady() {
      setTimeout(() => {
        if (this.videoItem) {
          this.showVideo = true;
          this.videoSource = this.videoItem.src;
          this.pictureSrc = this.videoItem.prc;
        }
      }, 1500)
    },
    methods: {
      videoErrorCallback: function(e) {
        uni.showModal({
          content: e.target.errMsg,
          showCancel: false
        })
      },
    }
  }
</script>

<style lang="scss">
  .vid-pr {
    width: 100vw;
    height: calc(100vh - var(--status-bar-height) - 45px - 5px);
  }

  .bg-pt {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    //CSS滤镜
    filter: blur(8px);
  }

  .flex-cnt {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .video-pr {
    width: 100%;
    position: absolute;
    top: 20%;
  }
</style>
